<template>
  <div class="collections">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <div>
          <mu-button flat class="backBarClass mu-ripple-wrapper" to="info">
            <mu-icon size="36" value="chevron_left" left></mu-icon>
          </mu-button>
        </div>
      </mu-button>
      我的申报单
    </mu-appbar>
    <mu-container ref="container" class="load-more-wrap">
      <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()"
                    :loaded-all="loaded">
        <mu-list :nested-indent="false" textline="three-line">
          <mu-paper style="margin: 1.5rem 0 1.5rem 0;padding: 1rem 0 1rem 0" round v-for="item in declareList"
                    v-bind:key="item.id" :z-depth="0">
            <mu-list-item :key="item.id" :to="{name:'declareInfo',query: {id:item.id}}">
              <mu-list-item-action>
                <mu-avatar color="primary">
                  <mu-icon value="turned_in"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>申报人：{{item.name}}</mu-list-item-title>
                <mu-list-item-sub-title>
                  申报企业：{{item.companyName}}
                </mu-list-item-sub-title>
                <mu-list-item-sub-title>
                  申报时间：{{util.formatyyyyMMddDate(item.createTime)}}
                </mu-list-item-sub-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-list-item-after-text>
                  {{item.type}}
                </mu-list-item-after-text>
                <mu-list-item-after-text>
                  <mu-badge :content="item.statusStr" color="primary"></mu-badge>
                </mu-list-item-after-text>
              </mu-list-item-action>
            </mu-list-item>
          </mu-paper>
        </mu-list>
      </mu-load-more>
    </mu-container>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';
  import util from '@/common/util.js';

  export default {
    name: 'collections',
    data() {
      return {
        loaded: false,
        title: '',
        declareList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多'
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 2000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
          this.listData();
        }, 2000)
      },
      listData() {
        const _self = this;
        let params = {
          params: [{
            field: 'create_time',
            operator: 'desc'
          }],
          currentPage: 1,
          pageSize: this.num
        };
        this.postRequest("/declare/list", params).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.declareList = res.data.records;
              if (_self.list && _self.list.length === res.data.total) {
                _self.loaded = true;
              }
              if (_self.declareList) {
                _self.declareList.forEach(function (i) {
                  i.sureTimeStr = util.formatDate(i.sureTime);
                  i.createTimeStr = util.formatyyyyMMddDate(i.createTime);
                  let statusStr = "";
                  switch (i.status) {
                    case 1:
                      statusStr = "申报中";
                      break;
                    case 2:
                      statusStr = "受理中";
                      break;
                    case 3:
                      statusStr = "调解中";
                      break;
                    case 4:
                      statusStr = "诉讼中";
                      break;
                    case 5:
                      statusStr = "执行中";
                      break;
                    case 6:
                      statusStr = "已结束";
                      break;
                    default:
                      break;
                  }
                  i.statusStr = statusStr;
                });
              }
            }
          }
        });
      },
      openPage(id) {
        this.$router.push({name: 'declareInfo', query: {id: id}});
      }
    },
    components: {
      headerBack
    },
    mounted: function () {
      this.listData();
    }
  }
</script>

<style scoped lang="less">

  .collections {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
    z-index: 999;
    background-color: #f5f5f5;
  }

  .load-more-wrap {
    width: 100%;
    height: 90%;
    flex-direction: column;
    overflow: scroll;
    .mu-appbar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    margin-bottom: 56px;
    -webkit-overflow-scrolling: touch;
  }

</style>
